{% extends "base.html" %}

{% block title %}开发者工具 - 工具箱{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="display-5 mb-3">开发者工具</h1>
            <p class="text-muted">为开发者提供的常用工具集合，提高开发效率</p>
        </div>
    </div>

    <div class="row">
        {% for tool in tools %}
        <div class="col-md-6 col-lg-4 mb-4">
            <div class="card h-100 shadow-sm hover-card">
                <div class="card-body">
                    <div class="d-flex align-items-center mb-3">
                        <div class="tool-icon bg-primary text-white rounded-circle p-3 me-3">
                            <i class="fas {{ tool.icon }} fa-2x"></i>
                        </div>
                        <h5 class="card-title mb-0">{{ tool.name }}</h5>
                    </div>
                    <p class="card-text text-muted">{{ tool.description }}</p>
                </div>
                <div class="card-footer bg-white border-0">
                    <a href="{{ tool.url }}" class="btn btn-outline-primary w-100">
                        <i class="fas fa-arrow-right me-2"></i>使用工具
                    </a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %}

{% block styles %}
<style>
    .tool-icon {
        width: 60px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    .hover-card {
        transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    }
    
    .hover-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
    }
</style>
{% endblock %} 